<nz-card style="height: calc(100vh - 90px)">

  <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
    <nz-form-item>
      <nz-form-label>关键词</nz-form-label>
      <nz-form-control>
        <input formControlName="key" nz-input placeholder="关键词" style="width: 160px;"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="margin-right: 0;">
      <nz-form-control>
        <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
      </nz-form-control>
    </nz-form-item>
  </form>

  <nz-table
    #dmTable
    nzBordered
    [nzFrontPagination]="false"
    nzSize="middle"
    [nzLoading]="loading"
    [nzData]="dmTableData"
    [nzTotal]="total"
    [(nzPageIndex)]="pageNum"
    [(nzPageSize)]="pageSize"
    (nzPageIndexChange)="queryInfo()"
  >
    <thead>
    <tr>
      <th>干渠断面</th>
      <th>水位(m)</th>
      <th>流量（m³/s）</th>
      <th nzWidth="100px">测报时间</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of dmTableData">
      <td>{{ data.stadiaName }}</td>
      <td>{{ data.waterHeight }}</td>
      <td>{{ data.flux }}</td>
      <td>{{ data.meaTime | date:'MM/dd hh:mm'}}</td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>
